import marked from "marked";
import hljs from "highlight.js";
import clipboard from 'clipboard';

class MarkUtils {
    constructor() {
        marked.setOptions({
            renderer: new marked.Renderer(),
            pedantic: false,
            gfm: true,
            tables: true,
            breaks: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            xhtml: false
        })
    }

    marked(data: string) {
        if (data) {
            let content = marked(data); // 文章内容
            return content;
        } else {
            return '';
        }
    }

    toView() {
        const preList = window.document.getElementsByTagName('pre');
        if (preList) {
            Array.prototype.slice.call(preList).forEach((item) => {
                const codes = item.getElementsByTagName('code');
                const codeClass = codes[0].className;
                const classNameArr = codeClass.split(" ");
                let lang: string | undefined = "";
                classNameArr.some((className: any) => {
                    if (className && className.indexOf("language-") > -1) {
                        lang = className.substring(className.indexOf("-") + 1,className.length);
                        return true;
                    }
                });

                // 检测语言是否存在，不存在则自动检测
                const language = hljs.getLanguage(lang.toLowerCase());
                if (language == undefined) {
                    // 启用自动检测
                    const autolanguage = hljs.highlightAuto(codes[0]?.textContent);
                    codes[0]?.classList.remove("language-" + lang);
                    lang = autolanguage.language;
                    if(lang == undefined) {
                        lang = "text";
                    }
                    codes[0]?.classList.add("language-" + lang);
                } else {
                    lang = language.name;
                }
                item.classList.add("highlight-wrap");
                item.setAttribute("autocomplete", "off")
                item.setAttribute("autocorrect", "off")
                item.setAttribute("autocapitalize", "off")
                item.setAttribute("spellcheck", "off")
                item.setAttribute("autocomplete", "false")
                item.setAttribute("contenteditable", "false")
                item.setAttribute("design", "by LIlGG")
                codes[0]?.setAttribute("data-rel", lang.toUpperCase());
                codes[0].classList.add(lang.toLowerCase());
                // 启用代码高亮
                hljs.highlightBlock(codes[0]);

                item.addEventListener("dblclick", (e) => {
                    if (e.target !== this) return;
                    item.classList.toggle("code-block-fullscreen");
                    const htmlEl = item.getElementsByTagName('html');
                    htmlEl.classList.toggle("code-block-fullscreen-html-scroll");
                })
                Array.prototype.slice.call(codes).forEach((codeChild, i) => {
                    codeChild.setAttribute("id","hljs-" + i)
                    codeChild.parentNode.innerHTML +=  '<a class="copy-code" href="javascript:" data-clipboard-target="#hljs-' + i +
                        '" title="拷贝代码"><CopyOutlined /></a>'
                    new clipboard(".copy-code");
                })
                item.innerHTML = item.innerHTML.replace('copyOutlined','CopyOutlined');
                console.log('节点', item.innerHTML.replace('copyOutlined','CopyOutlined'))
            })
        }
    }
}

const markdown = new MarkUtils();

export default markdown;